<template>
  <div id="seckill_app">
    <div class="control_button">
      <el-button type="primary" round @click="isShow.flag=true">新增</el-button>
    </div>
    <el-table :data="seckList" border style="width: 100%">
      <el-table-column prop="id" label="编号"> </el-table-column>
      <el-table-column prop="title" label="活动名称"> </el-table-column>
      <el-table-column prop="begintime" label="开始时间">
        <template v-slot="$props">
          {{
            setTimes(Number($props.row.begintime)).years +
            "-" +
            setTimes(Number($props.row.begintime)).mons +
            "-" +
            setTimes(Number($props.row.begintime)).days +
            "&nbsp;" +
            setTimes(Number($props.row.begintime)).hours +
            ":" +
            setTimes(Number($props.row.begintime)).mins +
            ":" +
            setTimes(Number($props.row.begintime)).secs
          }}
        </template>
      </el-table-column>
      <el-table-column prop="endtime" label="结束时间">
        <template v-slot="$props">
          {{
            setTimes(Number($props.row.endtime)).years +
            "-" +
            setTimes(Number($props.row.endtime)).mons +
            "-" +
            setTimes(Number($props.row.endtime)).days +
            "&nbsp;" +
            setTimes(Number($props.row.endtime)).hours +
            ":" +
            setTimes(Number($props.row.endtime)).mins +
            ":" +
            setTimes(Number($props.row.endtime)).secs
          }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="活动状态">
        <template v-slot="$props">
          <el-button
            type="warning"
            round
            size="mini"
            v-if="$props.row.status == 1"
            >正常</el-button
          >
          <el-button type="primary" round size="mini" v-else>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button type="warning" round size="mini">修改</el-button>
          <el-button type="primary" round size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Dialog :isShow="isShow" />
  </div>
</template>

<script>
import Dialog from "../components/addSeckill.vue"
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      isShow:{flag:false}
      
    };
  },
  computed: {
    ...mapState("seck_model", ["seckList"]),
  },
  methods: {
    //时间转换补零函数:toDB(num)
    // 参数：num数字
    // 返回值：小于10的补零返回
    setDb(num) {
      //补零操作
      if (num < 10) {
        return "0" + num;
      } else {
        return "" + num;
      }
    },
    //   秒转成时间：xx天xx时xx分xx秒   ：  -
    // setTime(num)
    // 	* 参数： 秒
    // 	* 返回值： {}数据返回(灵活一点)
    setTimes(num) {
      var time = new Date(num);
      var year = time.getFullYear(); //年
      var mon = this.setDb(time.getMonth() + 1); //0
      var day = this.setDb(time.getDate()); //24
      var hour = this.setDb(time.getHours()); //时
      var min = this.setDb(time.getMinutes()); //分
      var sec = this.setDb(time.getSeconds()); //秒

      return {
        secs: sec,
        mins: min,
        hours: hour,
        days: day,
        mons: mon,
        years: year,
      };
    },

    ...mapActions("seck_model", ["seckListActions"]),
  },
  created() {
    this.seckListActions();
    // console.log(this.$store.state.seck_model);
  },
  components:{
    Dialog
  }
};
</script>

<style>
</style>